<template>
  <view class="work-container">
	  <view class="examine-form flex flex-col flex-center">
		  <view class="view-top-title">{{info.examineName}}</view>
		  <view>检修编号：{{info.code}}</view>
	  </view>
    <TopBar
      :tabBars="tabBars"
      :tabIndex="tabIndex"
      @change="onTabChange"
    ></TopBar>
    <component
      ref="listRef"
      v-bind:is="currentTabComponent"
      :info="info"
    ></component>
  </view>
</template>

<script>
import basic from "./basic.vue";
import scheme from './scheme.vue'
import check from "./check.vue";
import TopBar from "@/components/top-bar/index.vue";
import { queryInfo } from "../../../../../../api/repair/repair";

export default {
  components: {
    TopBar,
    basic,
    scheme,
    check,
  },
  computed: {
    currentTabComponent() {
      return this.tabBars.find((item) => item.index === this.tabIndex).componentName;
    },
  },
  onLoad(option) {
	this.id = option.id
	this.detail(option.id)
  },
  data() {
    return {
      tabBars: [
        {
          name: "基本信息",
          componentName: "basic",
          index: 0,
        },
        {
          name: "检修方案",
          componentName: "scheme",
          index: 1,
        },
        {
          name: "交接验收",
          componentName: "check",
          index: 2,
        },
      ],
      tabIndex: 0,
      info: {},
	  details: ''
    };
  },
  methods: {
    onTabChange(obj) {
		this.tabIndex = obj.index;
		this.info = this.details
		this.detail(this.id)
    },
	detail(id){
		queryInfo(id).then(res=>{
			this.info = res.data
			this.details = this.info
		})
	}
  },
};
</script>

<style lang="scss" scoped>
	.view-top-title{
		font-size: 36rpx;
		font-weight: 700;
		margin-bottom: 6rpx;
	}
	.examine-form{
		color:#fff;
		height: 158rpx;
		background: #88B4C4;
	}
</style>
